<template>
    <layout-main v-model:collapsed="collapsed">
      <template #header>
        <div class="rd-box-between">
          <div class="rd-box" v-if="subjectId && subjectId === '1'">
            <IconLogo class="rd-font-28" />
            <span class="rd-font-22 rd-font-600 rd-color-dark rd-pl-16"
              >云南省自然资源监测平台</span
            >
          </div>
          <div
            class="rd-box back-btn"
            v-if="subjectId && subjectId !== '1'"
            @click="backHome"
          >
            <IconFont class="rd-font-24" type="icon-gqjc-arrow" />
            <span class="rd-font-16 rd-color-primary rd-pl-16">返回主页</span>
          </div>
          <a-button @click="logout">退出</a-button>
        </div>
      </template>
      <template #sider>
        <a-spin :spinning="mainWait">
          <div
            class="rd-box-center rd-mb-16 menu-toggle"
            @click="toggleCollapsed"
          >
            <MenuOutlined :rotate="collapsed ? 0 : 90" />
          </div>
          <MainSider
            v-if="menuList.length"
            :defaultSelectedKeys="defaultSelectedKeys"
            :defaultOpenKeys="defaultOpenKeys"
            :menuList="menuList"
            :menuTree="menuTree"
            @goPage="goPage"
          />
        </a-spin>
      </template>
      <template #content>
        <!-- tabs -->
        <DynamicTabs
          v-model:activeKey="panesActiveKey"
          :panes="panes"
          @remove="removeTab"
        />
        <router-view></router-view>
      </template>
    </layout-main>
</template>

<script>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import Cookie from 'vue-cookie'

import {
  MenuOutlined
} from '@ant-design/icons-vue'
import { Constant, Tools } from '@/utils'
import LayoutMain from '@/layout/LayoutMain.vue'
import DynamicTabs from '@/components/common/DynamicTabs.vue'
import MainSider from '@/components/main/MainSider.vue'
import IconLogo from '@/components/common/IconLogo.vue'

const { TOKEN_KEY } = Constant
const { getMainRoute } = Tools

export default {
  components: {
    MenuOutlined,
    LayoutMain,
    DynamicTabs,
    MainSider,
    IconLogo
  },
  setup () {
    const router = useRouter()
    const route = useRoute()
    // 菜单选中项列表
    const defaultSelectedKeys = computed(() => {
      const { meta } = route
      return meta.key ? [meta.key] : []
    })
    // 菜单开启项列表
    const defaultOpenKeys = computed(() => {
      const { meta } = route
      const keys = meta.key.split('.')
      const list = []
      keys.reduce((a, b) => {
        list.push(a)
        return a + '.' + b
      })
      return list
    })

    const store = useStore()
    const mainWait = computed(() => store.state.Menus.mainWait)
    // 菜单列表
    const menuList = computed(() => store.state.Menus.menuList)
    // 菜单树
    const menuTree = computed(() => store.state.Menus.menuTree)
    // 专题id
    const subjectId = computed(() => store.state.Menus.subjectId)
    // 选项卡列表
    const panes = computed(() => store.state.Tabs.mainPanes)
    const panesActiveKey = computed({
      get: () => store.state.Tabs.mainPanesKey,
      set: val => {
        store.commit('Tabs/setMainPanesKey', val)
        router.push(val)
      }
    })
    const removeTab = key => {
      store.commit('Tabs/removeMainPanes', key)
      router.push(store.state.Tabs.mainPanesKey)
    }

    const collapsed = ref(false)
    const toggleCollapsed = () => {
      collapsed.value = !collapsed.value
    }

    const backHome = async () => {
      localStorage.removeItem('projectId')
      store.commit('Menus/setMainWait', true)
      store.commit('Menus/setSubjectId', '1')
      store.commit('Tabs/setMainPanes', null)
      const mainRoute = await getMainRoute({})
      const thePath = mainRoute.children[0].path
      router.addRoute(mainRoute)
      store.commit('Menus/setMainWait', false)
      router.push(thePath)
    }

    const goPage = path => {
      store.commit('Tabs/setMainPanesKey', path)
      router.push({ path })
    }

    const goPageWithTabs = key => {
      router.push(key)
    }

    const logout = () => {
      localStorage.clear()
      Cookie.delete(TOKEN_KEY)
      store.dispatch('resetStates')
      router.replace('/login')
    }

    return {
      mainWait,
      collapsed,
      toggleCollapsed,
      panes,
      panesActiveKey,
      menuList,
      menuTree,
      defaultSelectedKeys,
      defaultOpenKeys,
      subjectId,
      removeTab,
      backHome,
      goPage,
      goPageWithTabs,
      logout
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/scss/_vars.scss";

.back-btn {
  cursor: pointer;
}
.menu-toggle {
  @extend .back-btn;
  height: 28px;
  background-color: $--bg-primary;
}
</style>
